<script setup>
import { ref } from 'vue'

defineProps({
  msg: {
    type: String,
    default: '欢迎来到 Layout 页面'
  }
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <el-button native-type="button" @click="count++">Count+1 =  {{ count }}</el-button>
    <p class="edit">
      <code>上边按钮的 type属性 = button</code>
    </p>
  </div>

  <div>
    <h2>这个是 Layout</h2>
    <el-button type="primary" @click="count--">Count-1 = {{ count }}</el-button>
  </div>
  <p class="read-the-docs">上边按钮的 type属性 = primary</p>

  <br>
  <br>
  <p>
    查看
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, Vue+Vite官方首发
  </p>
  <p>
    了解 更多 关于 IDE 对 Vue的 支持, 请点击
    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue文档扩展指南</a>.
  </p>
  <p class="read-the-docs">点击Vite和Vue徽标了解更多信息</p>
</template>

<style scoped>
.read-the-docs {
  color: #0fd351;
}

.edit {
  color: #e70e0e;
}
</style>